<template>
    <div class="code-check" id="codeCheck">
        <div class="code-input-wrap">
            <input id="inviteCode" code="code" class="code-input" v-model="code" placeholder="请输入验证码" type="number" @blur="codeInputBlur" @focus="focusFn">
            <label v-if="codeMsg.codeWarnShow && content.isShowRedWarn" class="code-error" for="inviteCode">{{codeMsg.codeWarnText}}</label>
            <img v-if="codeMsg.isNeedClearIcon" class="booking_close_button" src="../../../assets/images/common/booking_close_button.png" @click="code=null" />
        </div>
        <div class="count-down-wrap">
            <span type="button" class="count-down" @click="getCodeFn()" :class="{'disabled':!codeMsg.isCangetCode}" v-html="codeMsg.codeDown"></span>
        </div>
        <div class="code-under-line"></div>
    </div>
</template>
<!--使用方法<div slot="cantClick" @click="sureGetLocationFn" class="com_black"></div>-->
<script>
    import xurl from "../../../x/xurl";
    export default {
        code: "codeCheck",
        props:{
            getCodeUrl:{
                type:String
            },
            checkCodeUrl:{
                type:String
            },
            codeMsgProps:{
                type:Object
            }
        },
        data(){
            return{
                codeTimer:null,
                code:null,
                codeMsg:{
                    codeWarnShow:false,//是否需要错误的提示
                    codeWarnText:'用户名不能为空',//toast提示字样
                    codeDown:'获取验证码',//验证码右侧的提示字样
                    isCangetCode:false,//是否可以点击获取验证码
                    time:60,//道计时的时间
                    isNeedClearIcon:true,//是否需要清除验证码input的内容
                    isNeedCodeDown:true,//是否需要获取验证码的那几个字
                    codeLength:6,//验证码验证长度
                    isEmptyNotWarn:true,
                }
            }
        },
        mounted(){
            this.codeMsg = Object.assign({},this.codeMsg,this.codeMsgProps)
            window.onresize = function (e) {
                var h = $(window).height();
                if (outer.isAndroid) {
                    if (h <= window.screen.availHeight / 2) {
                        $('.code-under-line')[0].scrollIntoView();
                    }
                }
            }
        },
        methods:{
            codeInputBlur(){
                this.iosBlur()
                let regCode = new RegExp('^\\d{'+this.codeMsg.codeLength+'}$')
                let that = this;
                if(!this.code && !this.codeMsg.isEmptyNotWarn){
                    this.codeWarnText = '请输入验证码';
                    this.$root.$emit('toast', {msg: this.codeWarnText});
                    this.codeWarnShow = true;
                }else if( this.code && !regCode.test(this.code) && this.code.toString().length > 0 ){
                    this.codeWarnText = '验证码为'+this.codeMsg.codeLength+'位数字';
                    this.$root.$emit('toast', {msg: this.codeWarnText});
                    this.codeWarnShow = true;
                }
            },
            getCodeFn(){
                this.$emit('getCode')
            },
            focusFn(){
                this.$emit('codeFocusFn');
            },
            getCode(){
                let that = this;
                // let url = this.NW_API_vue + "/api/store/apply/code/send/phone/" + phone;
                this.isCangetCode = true;
                xurl.postLoading(this.getCodeUrl).then(data => {
                    if (data.success) {
                        this.isCangetCode = true;
                        if(that.codeTimer){
                            clearInterval(that.codeTimer);
                        }
                        that.codeTimer = setInterval(function () {
                            that.codeMsg.time --;
                            that.codeDown = `重新获取(${that.codeMsg.time})s`;
                            if(that.codeMsg.time <= 0){
                                that.codeMsg.time = 60;
                                that.codeDown = `获取验证码`;
                                that.isCangetCode = false;
                                clearInterval(that.codeTimer);
                            }
                        },1000)
                    }else{
                        this.isCangetCode = false;
                    }
                })
            },
        },
        watch:{
            code:function(val){
                let obj = {};
                obj = {code:val};
                if(val && val.length>=this.codeMsg.codeLength){
                    this.code = val.slice(0,this.codeMsg.codeLength);
                }
                let regCode = new RegExp('^\\d{'+this.codeMsg.codeLength+'}$')
                if(regCode.test(this.code)){
                    obj.codeTrue = true;
                    this.$emit("changeCheck",obj);
                    this.codeWarnShow = false;
                }else{
                    obj.codeTrue = false;
                    this.$emit("changeCheck",obj);
                }
            },
            codeMsgProps(val){
                this.codeMsg = Object.assign({},this.codeMsg,val);
            }
        }
    }
</script>

<style scoped>
    .code-check{
        position: relative;
        width: 100%;
        display: -webkit-flex;
        display: flex;
    }
    .code-input{
        width: 100%;
        height: .4rem;
        line-height: .4rem;
        border-radius: 5px;
        border: 1px solid #d7d7d7;
        padding-left: .2rem;
        margin-top: .12rem;
    }
    .code-error{
        position: absolute;
        bottom: -.2rem;
        color: red;
        font-size: .11rem;
        left: .2rem;
        z-index: 10;
    }
    .count-down-wrap {
        margin-top: .12rem;
        padding-left: .1rem;
    }
    .count-down {
        background: #fff;
        display: block;
        width: .9rem;
        height: .4rem;
        line-height: .4rem;
        color: #3b67a4;
        cursor: pointer;
        text-align: center;
        border: none;
        outline: none;
        font-size: .11rem;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        white-space: nowrap;
    }
    .code-input-wrap{
        -webkit-flex: 1;
        flex: 1;
        position: relative;
    }
    .disabled.count-down{
        color: gray;
    }
    .booking_close_button{
        width: .34rem;
        height: .34rem;
        right: 0;
        padding: .1rem;
        position: absolute;
        top: .15rem;
        margin: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .code-input::-webkit-input-placeholder{
        color: #CCCCCC;
    }
    .code-input::placeholder{
        color: #CCCCCC;
    }
</style>